<template>
    <div>
        <input type="text"
            v-model="clientContent">
        <button @click="addContent">发送</button>
        <button @click="userRemoveRoomName">离开房间</button>
        <ul>
            <li v-for="(item,index) in clientContentList"
                :key="index">
                {{item.userName}}:{{item.content}}
            </li>
        </ul>
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
      clientContent: ''
    };
  },
  methods: {
    ...mapActions(['addClientContentList', 'removeRoomName']),
    addContent() {
      this.addClientContentList(this.clientContent);
      this.clientContent = '';
    },
    userRemoveRoomName() {
      this.removeRoomName('离开房间');
      this.$router.go(-1);
    }
  },
  components: {},
  computed: {
    ...mapGetters({
      user: 'getUser',
      clientContentList: 'getClientContentList'
    })
  },
  created() {}
};
</script>
